<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="title">后台管理</h2>
      <el-form :model="loginForm" ref="adminLoginForm" :rules="rules" label-width="0px">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" @keyup.enter.native="handleLogin" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="button-container">
            <el-button type="primary" @click="handleLogin">登录</el-button>
            <el-button @click="handleReset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {reactive, ref, getCurrentInstance} from 'vue'
import {ElMessage} from "element-plus";
import {useRouter} from 'vue-router';
import {LOGIN} from "@/consts/Url";
import EncryptUtils from "@/utils/EncryptUtils";
import UserToken from "@/user/UserToken";

const router = useRouter();

const {proxy} = getCurrentInstance();

const adminLoginForm = ref(null);
const loginForm = reactive({
  username: '',
  password: ''
});

const rules = ref({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'}
  ]
});

async function handleLogin() {
  try {
    const isValid = await new Promise((resolve) => {
      adminLoginForm.value.validate((valid) => {
        resolve(valid);
      });
    });

    if (!isValid) {
      return false;
    }

    const loginCodeResponse = await proxy.$request.get(LOGIN.LOGIN_CODE.value, {
      account: loginForm.username
    });

    if (loginCodeResponse.code !== 0) {
      ElMessage.error(loginCodeResponse.message);
      return;
    }

    const publicKey = loginCodeResponse.data;
    const encryptPassword = EncryptUtils.encrypt(loginForm.password, publicKey);

    const loginResponse = await proxy.$request.get(LOGIN.LOGIN.value, {
      account: loginForm.username,
      password: encryptPassword
    });

    if (loginResponse.code !== 0) {
      ElMessage.error(loginResponse.message);
      return;
    }
    UserToken.save(loginResponse.data.token);
    router.push('/index');
  } catch (error) {
    ElMessage.error('登录失败');
    console.error(error);
  }
}

function handleReset() {
  adminLoginForm.value.resetFields();
}

</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-card {
  padding: 20px;
  width: 400px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: white; /* 确保卡片背景为白色，突出卡片 */
}

.title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中对齐 */
  width: 100%; /* 容器宽度 */
  gap: 10px; /* 按钮之间的间距 */
}
</style>
